<template>
    <div class="containers">
        <Scroll class="scroll" :data="songList">
            <div>
                <div cass="recommend">
                    <div class="title">
                        <div class="line"></div>
                        <p>推荐歌单</p>
                    </div>
                    <ul>
                        <li @click="jumpSongList(item.id)" v-for="(item,index) of songList" :key="index">
                            <img :src="item.picUrl" >
                            <div class="small">
                                <span class="iconfont smallIcon">&#xe600;</span>
                                <p class="count">{{item.playCount}}</p>
                            </div>
                            <p class="content">{{item.name}}</p>
                        </li>
                    </ul>
                </div>
                <div class="newMusic">
                    <div class="title">
                        <div class="line"></div>
                        <p>最新音乐</p>
                    </div>
                    <ul class="ul"> 
                    <li v-for="(item,index) of name" :key="index" class="li">
                        <div class="text">
                            <p class="name">{{item.name}}</p>
                            <p class="author">{{item.author}}</p>
                        </div>
                        <div class="iconfont play">&#xe621;</div>
                    </li>
                    </ul>
                </div>
            </div>
        </Scroll>
    </div>
</template>

<script>
import Scroll from '../../../../base/scroll'
import { SongListOne, SongListNewSong } from '../../../../api/recommendMusic.js'
export default {
    data() {
        return {
            songList: [],
            name: []
        }
    },
    mounted() {
        SongListOne().then(res => {
            this.songList = res.data.result.slice(0,6)
            this.songList.forEach((item) => {
                let count = item.playCount.toString().length
                if (count > 5 && count < 8) {
                    item.playCount = item.playCount.toString().slice(0,Number(count)-4)+'万'
                }
                else if (count > 8 || count === 8) {
                    item.playCount = item.playCount.toString().slice(0,Number(count)-8)+'亿'
                }
            })
        })
        SongListNewSong().then(res => {
             res.data.result.map((item) => {
                let obj = {
                    name: '',
                    author: ''
                }
                let name = item.name
                let author = item.song.artists[0].name + '-' + item.song.album.name
                obj['name'] = name
                obj['author'] = author
                this.name.push(obj)
            })
        })
    },
    methods: {
        jumpSongList(id) {
            this.$router.push(`/songList/${id}`)
        }
    },
    components: {
        Scroll
    }
}
</script>

<style lang="scss" scoped>
@import './src/common/scss/mixin.scss';
    .containers {
        margin-top: 70px;
        overflow: scroll;
        height: 1700px !important;
        .scroll {
            overflow: hidden;
            width: 100%;
            height: 81.5%;
            .title {
                @include display-r;
                align-items: center;
                .line {
                    width: 7px;
                    height: 50px;
                    background: #d43c33;
                    margin-right: 14px;
                }
                p {
                    font-size: 45px;
                    font-weight: lighter;
                    color: #000;
                }
            }
            ul {
                @include display-r;
                flex-wrap: wrap;
                margin-top: 50px;
                li {
                    @include display-c;
                    margin-left: 13px;
                    position: relative;
                    margin-bottom: 20px;
                    img {
                        width: 320px;
                        height: 320px;
                    }
                    .small {
                        @include display-r;
                        position: absolute;
                        left: 170px;
                        color: #fff;
                        align-items: center;
                        top: 20px;
                        text-shadow: 1px 0 0 rgba(0,0,0,.15);
                        font-size: 35px;
                        .smallIcon {
                            font-size: 40px;
                        }
                    }
                    .content {
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        padding: 20px 8px 0 18;
                        min-height: 80;
                        line-height: 1.2;
                        font-size: 35px;
                        width: 280px;
                        margin-top: 20px;
                    }
                }
            }
            .newMusic {
                margin-top: 70px;
                .ul {
                    @include display-c;
                    .li {
                        @include display-r;
                        justify-content: space-between;
                        align-items: center;
                        padding-left: 40px;
                        height: 175px;
                        border-bottom: 2px solid #eee;
                        .text {
                            line-height: 70px;
                            width: 95%;
                            .name {
                                font-size: 40px;
                                width: 800px;
                                @include nowrap;
                            }
                            .author {
                                font-size: 35px;
                                color: #888;
                                @include nowrap;
                                width: 800px;
                            }
                        }
                        .play {
                            font-size: 70px;
                            margin-right: 35px;
                            color: #888;
                        }
                        
                    }
                }
            }
        }
    }
</style>